import React, {useEffect} from 'react';
import {View,} from '@tarojs/components';
import styles from './index.module.scss';
import Tabbar from "@/app/pages/home/Tabbar";
import bgUrl from '@/app/asserts/bg.png';
import {Image} from "@taroify/core"
import avatarUrl from '@/app/asserts/avatar.jpg';
import {
    Arrow,
    Paid,
    Logistics,
    BagOutlined,
    SmileCommentOutlined,
    GoldCoinOutlined,
    ServiceOutlined
} from "@taroify/icons";
import BizButton from "@/app/pages/user/BizButton";

const Index: React.FC = () => {


    useEffect(() => {
        load();
    }, []);

    const load = async () => {


    };


    return (
        <View className={styles.page}>
            <View className={styles.page_head} style={{backgroundImage: `url(${bgUrl})`}}>
                <View className={styles.page_head_left}>
                    <Image width={100} height={100} src={avatarUrl} round={true}></Image>
                </View>
                <View className={styles.page_head_right}>
                    哈哈哈哈哈 🌟
                </View>
            </View>
            <View className={styles.page_body}>
                <View className={styles.page_body_top}>
                    <View className={styles.page_body_top_top}>
                        <View className={styles.page_body_top_top_left}>
                            我的订单
                        </View>
                        <View className={styles.page_body_top_top_right}>
                            全部订单
                            <Arrow className={styles.page_body_top_top_right_icon}/>
                        </View>

                    </View>
                    <View className={styles.page_body_top_bottom}>
                        <BizButton icon={<Paid size={24}/>} title={'待付款'} content={'1'}></BizButton>
                        <BizButton icon={<Logistics size={24}/>} title={'待发货'} content={'9'}></BizButton>
                        <BizButton icon={<BagOutlined size={24}/>} title={'待收货'} content={'99'}></BizButton>
                        <BizButton icon={<SmileCommentOutlined size={24}/>} title={'待评价'}></BizButton>
                        <BizButton icon={<GoldCoinOutlined size={24}/>} title={'退款/售后'}></BizButton>

                    </View>

                </View>
                <View className={styles.page_body_center}>
                    <View className={styles.page_body_center_top}>
                        <View>
                            收货地址
                        </View>
                        <View className={styles.page_body_center_top_right}>
                            <Arrow/>
                        </View>

                    </View>
                    <View className={styles.page_body_center_center}>
                        <View>
                            优惠券
                        </View>
                        <View className={styles.page_body_center_center_right}>
                            <View className={styles.page_body_center_center_right_txt}>
                                10
                            </View>
                            <Arrow/>

                        </View>
                    </View>
                    <View className={styles.page_body_center_bottom}>
                        <View>
                            积分
                        </View>
                        <View className={styles.page_body_center_bottom_right}>
                            <View className={styles.page_body_center_bottom_right_txt}>
                                2
                            </View>
                            <Arrow/>
                        </View>
                    </View>
                </View>
                <View className={styles.page_body_bottom}>
                    <View className={styles.page_body_bottom_item}>
                        <View>
                            帮助中心
                        </View>
                        <Arrow className={styles.page_body_bottom_item_arrow}/>

                    </View>
                    <View className={styles.page_body_bottom_item}>
                        <View>
                            客服热线
                        </View>
                        <ServiceOutlined size={18} className={styles.page_body_bottom_item_arrow}/>

                    </View>
                </View>
            </View>

            <Tabbar value={3}></Tabbar>
        </View>
    );
};

export default Index;
